<template>
  <div>
    <el-form
      ref="searchForm"
      class="searchForm"
      :model="searchForm.queryCondition"
      label-width="50"
    >
      <el-row :gutter="24">
        <!--        合计24份  -->
        <el-col :span="4">
          <el-form-item prop="searchTimeRange">
            <el-date-picker
              type="datetimerange"
              start-placeholder="请假时间..."
              range-separator="至"
              v-model="searchTimeRange"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="4" :offset="4">
          <el-form-item prop="leaveTypes">
            <el-select
              placeholder="请假类型..."
              v-model.trim="searchForm.queryCondition.leaveTypes"
              multiple
            >
              <!-- { index: 0, value: "sickLeave",text: "病假", },-->
              <el-option
                v-for="e in leaveTypeEnums"
                :key="e.value"
                :value="e.value"
                :label="e.text"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4" :offset="0">
          <el-form-item prop="auditStates">
            <el-select
              multiple
              v-model="searchForm.queryCondition.auditStates"
              placeholder="审核状态..."
            >
              <el-option
                v-for="e in auditStateEnums"
                :key="e.value"
                :value="e.value"
                :label="e.text"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="queryByCondition(1)"
          >查询</el-button
        >
        <el-button type="warning" icon="el-icon-remove" @click="reset"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-row>
      <el-col :span="3">
        <apply-insert @postSubmit="queryByCondition"></apply-insert>
      </el-col>
      <el-col :span="3">
        <el-button size="small">批量删除</el-button>
      </el-col>
      <el-col :span="3">
        <el-button size="small">批量确认</el-button>
      </el-col>
    </el-row>
    <!--
      "leaveId": 9,
      "applier": "libai06",
      "applyTime": "2021-10-20T16:43:00.095",
      "auditor": null,
      "auditTime": null,
      "applyState": "saved",
      "auditState": "notAudit",
      "deleted": false,
      "version": 0,
      "startTime": "2021-10-20T08:41:28.749",
      "endTime": "2021-10-25T08:41:28.749",
      "reason": "李白说要请假吟诗作赋",
      "auditWord": null,
      "leaveType": "issueLeave"
-->
    <el-table :data="results" class="resultsTable" stripe height="400px">
      <el-table-column
        type="selection"
        label="选中"
        width="32px"
      ></el-table-column>
      <el-table-column
        prop="leaveId"
        label="ID"
        width="60px"
        align="center"
      ></el-table-column>
      <el-table-column
        width="80px"
        align="center"
        :formatter="leaveTypeFormat"
        label="请假类型"
      ></el-table-column>
      <el-table-column label="请假原因" :formatter="reasonFormat" width="125px">
      </el-table-column>
      <el-table-column
        label="请假时间"
        :formatter="applyTimeRangeFormat"
        width="220px"
      >
      </el-table-column>
      <el-table-column
        label="审核状态"
        :formatter="applyStateFormat"
        width="80px"
      >
      </el-table-column>
      <el-table-column
        label="审核状态"
        :formatter="auditStateFormat"
        width="80px"
      >
      </el-table-column>
      <el-table-column label="审核人" prop="auditor" width="80px">
      </el-table-column>
      <el-table-column
        label="审核意见"
        :formatter="auditWordFormat"
        width="120px"
      ></el-table-column>
      <el-table-column
        label="请假提交时间"
        :formatter="applyTimeFormat"
        width="120px"
      ></el-table-column>

      <!--              <el-table-column label="applyState" :formatter="applyStateFormat" align="center">-->
      <!--              </el-table-column>-->
      <el-table-column
        width="215px"
        fixed="left"
        label=" 编辑 / 提交 / 确认 / 删除 "
        align="center"
      >
        <template slot-scope="props">
          <el-tooltip content="编辑" placement="top">
            <el-button
              class="el-button--mini"
              type="primary"
              icon="el-icon-edit"
              @click="openById(props.row.leaveId)"
            ></el-button>
          </el-tooltip>
          <el-tooltip content="提交" placement="top">
            <el-button
              class="el-button--mini"
              type="danger"
              icon="el-icon-position"
              @click="submitById(props.row.leaveId)"
            ></el-button>
          </el-tooltip>
          <el-tooltip content="确认" placement="top">
            <el-button
              class="el-button--mini"
              type="warning"
              icon="el-icon-refresh-left"
              @click="confirmById(props.row.leaveId)"
            ></el-button>
          </el-tooltip>
          <el-tooltip content="删除" placement="top">
            <el-button
              class="el-button--mini"
              type="info"
              icon="el-icon-delete"
              @click="deleteById(props.row.leaveId)"
            ></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :total="total"
      :page-size="searchForm.pageSize"
      :current-page="searchForm.pageNum"
      @current-change="queryByCondition"
      layout="total, prev, pager, next, jumper"
    ></el-pagination>
    <apply-modify
      ref="modifyDialog"
      @postSubmit="queryByCondition"
    ></apply-modify>
  </div>
</template>

<script>
import format from "@/utils/format";
// import New from './components/New.vue';
import ApplyInsert from "@/components/hr/ApplyInsert";
import { leave } from "@/apis";
import ApplyModify from "@/components/hr/ApplyModify";
export default {
  name: "LeaveApply",
  components: {
    ApplyModify,
    ApplyInsert,
    // New,Old,
  },
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      sampleD: "value",

      searchTimeRange: [],
      searchForm: {
        pageNum: 1,
        pageSize: 8,
        queryCondition: {
          leaveTypes: [],
          auditStates: [],
          queryStartTime: null,
          queryEndTime: null,
        },
      },
      total: 0,
      /** results 数组 里元素的 结构体 row
      *{
      "leaveId": 9,
      "applier": "libai06",
      "applyTime": "2021-10-20T16:43:00.095",
      "auditor": null,
      "auditTime": null,
      "applyState": "saved",
      "auditState": "notAudit",
      "deleted": false,
      "version": 0,
      "startTime": "2021-10-20T08:41:28.749",
      "endTime": "2021-10-25T08:41:28.749",
      "reason": "李白说要请假吟诗作赋",
      "auditWord": null,
      "leaveType": "issueLeave"
    }
      * */
      results: [],
    };
  },
  computed: {
    leaveTypeEnums() {
      return this.$store.state.leaveTypeEnums;
    },
    auditStateEnums() {
      return this.$store.state.auditStateEnums;
    },
    applyStateEnums() {
      return this.$store.state.applyStateEnums;
    },

    // sampleC() {
    //     return this.sampleD+'--';
    // }
  },
  created() {},
  mounted() {
    this.queryByCondition(1);
  },
  methods: {
    sampleM() {},
    reset() {
      this.$refs.searchForm.resetFields();
      this.searchTimeRange = null;
    },
    queryByCondition(pageNum) {
      if (pageNum) this.searchForm.pageNum = pageNum;
      /* this.$http({
        method: "post",
        url: "http://localhost:9091/leave/leaveBill/query/apply",
        data: this.searchForm,
      })*/
      leave.queryApply(this.searchForm).then(
        (res) => {
          this.total = res.data.total;
          this.results = res.data.results;
        },
        (error) => {
          this.$message.warning("query mistake：" + error.response.status);
        }
      );
    },
    leaveTypeFormat(row) {
      let c = this.leaveTypeEnums.find((x) => x.value === row.leaveType);
      return c ? c.text : "N/A";
    },
    applyStateFormat(row) {
      let c = this.applyStateEnums.find((x) => x.value === row.applyState);
      return c ? c.text : "N/A";
    },
    auditStateFormat(row) {
      let c = this.auditStateEnums.find((x) => x.value === row.auditState);
      return c ? c.text : "N/A";
    },
    reasonFormat(row) {
      return format.thumbnail(row.reason);
      // const fl = 8;
      //
      // if (!row.reason) return "N/A";
      // let p = row.reason.length;
      // if (p < fl) {
      //   return row.reason;
      // } else {
      //   return row.reason.substr(0, fl - 2) + "...";
      // }
    },
    auditWordFormat(row) {
      return format.thumbnail(row.auditWord);
      // const fl = 8;
      // if (!row.auditorWord) return "N/A";
      // let p = row.auditorWord.length;
      // if (p < fl) {
      //   return row.auditorWord;
      // } else {
      //   return row.auditorWord.substr(0, fl - 2) + "...";
      // }
    },
    applyTimeRangeFormat(row) {
      let start = new Date(row.startTime);
      let end = new Date(row.endTime);
      return `${start.getMonth() + 1}月${start.getDate()}日${start.getHours()}时
      -${end.getMonth() + 1}月${end.getDate()}日${end.getHours()}时`;
    },
    applyTimeFormat(row) {
      let t = new Date(row.applyTime);
      return `${t.getFullYear()}/${t.getMonth() + 1}/${t.getDate()}`;
    },
    openById(id) {
      this.$refs.modifyDialog.appear(id);
    },
    submitById(id) {
      // this.$http({
      //   method: "put",
      //   url: "http://localhost:9091/leave/leaveBill/submit/" + id,
      // })
      // confirm
      this.$confirm("确实要进行？").then((x) => {
        leave.leaveSubmit(id).then(
          (res) => {
            this.$message.warning(JSON.stringify(res.data));
            this.queryByCondition();
          },
          (error) => {
            console.log(" request error : " + error.response.status);
          }
        );
      });
    },
    confirmById(id) {
      this.$http({
        method: "put",
        url: "http://localhost:9091/leave/leaveBill/confirm/" + id,
      }).then(
        (res) => {
          if (res.data) {
            this.$message.success("成功确认审核结果");
          }
          this.queryByCondition();
        },
        (error) => {
          console.log(" request error : " + error.response.status);
        }
      );
    },
  },
  watch: {
    searchTimeRange(n, o) {
      this.$message.success(
        "观测时间：" + JSON.stringify(n) + "  == " + JSON.stringify(o)
      );
      if (n) {
        this.searchForm.queryCondition.queryStartTime = n[0];
        this.searchForm.queryCondition.queryEndTime = n[1];
      } else {
        this.searchForm.queryCondition.queryStartTime = null;
        this.searchForm.queryCondition.queryEndTime = null;
      }
    },
    // sampleC(newValue, oldValue) {
    //
    // }
  },
};
</script>

<!--<style scoped>-->
<style lang="scss" scoped>
.el-table {
  .el-button {
    margin-left: 4px;
  }
}
</style>
<style lang="scss">
.el-select__tags {
  flex-wrap: nowrap;
  overflow: hidden;
}
</style>
